<template>
	<view class="container">
		<view class="overlay">
			<TopNavVue />

			<view style="height: 100vh;position: relative;">
				<map ref="sonRef" :is-map-draggable="isMapDraggable" />

			</view>
			<view style="position: absolute;top: -50rpx;right: -120rpx;" v-show="startSearch">
				<animation />
			</view>
			<view>
				<touchbox :maxTop="maxTops" :initTop="initTops" v-show="indexs===0">
					<view style="display: flex;justify-content: center;">
						<view style="position: absolute;top: -100rpx;right: 20rpx;">
							<view
								style="border-radius: 10rpx; background-color: white; height:75rpx;width: 80rpx; display: flex; justify-content: center;">
								<image style="height: 50rpx; width: 50rpx; margin-top: 15rpx;"
									src="https://course.jchen.art/static/images/icon-location.png" @click="mapcontrol">
								</image>
							</view>
						</view>
						<view
							style="background-color: antiquewhite;border-radius: 10rpx; height: 350rpx;width: 700rpx;">
							<view style="display: flex;justify-content: space-around;padding-top: 20rpx;">
								<view style="color: #91939A;margin-left: -135rpx;">当前范围<text
										style="color: black;padding-left: 10rpx;">20km</text></view>
								<view style="color: black;margin-right: -135rpx;">20台<text
										style="color: #91939A;padding-left: 10rpx;">农机</text></view>
							</view>
							<view style="padding: 20rpx;margin-top: 10rpx;" @click="input">
								<u--input placeholder="寻找农机" prefixIcon="search" disabled="true"
									prefixIconStyle="font-size: 50px;color: black" placeholderClass=""></u--input>
							</view>
							<view
								style="display: flex; padding: 20rpx; flex-direction: row; align-items: center; justify-content: space-between;">
								<view style="flex: 1; padding-right: 10rpx; text-align: center;">
									<u-button color="#4BA367" text="发布农活"></u-button>
								</view>
								<view class="item_clom"
									style="flex: 1; text-align: center;margin-left: 35rpx;width: 100%;">
									<view style="color: #F56C6C; font-weight: 600; font-size: 40rpx;">1</view>
									<view style="color: #91939A; font-size: 22rpx; margin-top: 3rpx;">项任务正在进行</view>
								</view>
								<view class="item_clom" style="flex: 1; text-align: center;margin-top: -18rpx;">
									<image src="../../static/fb.png" style="height: 70rpx; width: 70rpx;"></image>
									<view class="item-text" style="color: #91939A; font-size: 22rpx;">我发布的</view>
								</view>
								<view class="item_clom" style="flex: 1; text-align: center;margin-top: -18rpx;">
									<image src="../../static/sc.png" style="height: 70rpx; width: 70rpx;"></image>
									<view class="item-text" style="color: #91939A; font-size: 22rpx;">我的订单</view>
								</view>
							</view>

							<view style="padding: 20rpx;margin-top: 40rpx;">
								<scroll-view style="height: 54vh;" scroll-y="true" enable-back-to-top="true">
									<view style="padding: 20rpx;">
										<image src="../../static/img/FrameAdv.png" style="width: 100%;height: 200rpx;">
										</image>
									</view>

									<view style="padding: 5rpx;">
										<text style="font-weight: 700;font-size: 35rpx;gap: 15rpx;">农机列表</text>
										<image src="../../static/img/Frame.png" style="height: 40rpx;width: 40rpx;">
										</image>
									</view>

									<view style="padding-top: 30rpx;" v-for="(item, index) in 10" :key="index"
										@click="to(item)">
										<view style="display: flex; background-color: rgb(251, 251, 251);">

											<view>
												<image
													src="https://jingfeiwrj.oss-cn-shenzhen.aliyuncs.com/jingfei/%E5%86%9C%E6%9C%BA.jpg"
													style="height: 200rpx;width: 250rpx;border-top-left-radius: 3%;border-bottom-left-radius: 3%;">
												</image>
											</view>

											<view
												style="display: flex; background-color: white; flex-wrap: nowrap; flex-direction: row; padding: 20rpx; height: 161rpx; width: 450rpx; border-top-right-radius: 3%; border-bottom-right-radius: 3%;">
												<view>
													<view style="font-weight: 700; font-size: 30rpx;">
														{{ limitedServerName("旋耕作业") }}
													</view>
													<view style="padding-top: 30rpx;">
														<u-rate size="15" :count="count" activeColor="#FFA700"
															v-model="value"></u-rate>
													</view>
													<view
														style="display: flex; flex-direction: row; padding-top: 32rpx;">
														<view style="font-size: 22rpx;">服务范围</view>
														<view style="padding-left: 5rpx; margin-top: -8rpx;">
															<image src="../../static/icon/Frame-2.png"
																style="height: 25rpx;width: 25rpx;"></image>
														</view>
														<view style="padding-left: 10rpx; font-size: 22rpx;">
															{{ limitedAddress("湖南省涟源市") }}
														</view>
													</view>
												</view>
												<view
													style="display: flex; flex-direction: column; padding-left: 70rpx; line-height: 65rpx;">
													<!-- <view style="display: flex; margin-top: -10rpx;">
														<view
															style="position: absolute; right: 155rpx; padding-top: 5rpx;">
															<image src="../../static/icon/Frame-1.png"
																style="height: 30rpx; width: 30rpx;"></image>
														</view>
														<view
															style="font-size: 25rpx; position: absolute; right: 80rpx;">
															120次</view>
													</view> -->

													<view style="padding-top: 55rpx;">
														<view
															style="color: red; font-size: 32rpx; transform: translate(-25px);">
															面议/亩</view>
														<view style="display: flex;">
															<view
																style="font-weight: 700; position: absolute; right: 145rpx; font-size: 22rpx;">
																距离</view>
															<view
																style="font-weight: 700; position: absolute; right: 50rpx; font-size: 22rpx;">
																230km</view>
														</view>
													</view>
												</view>
											</view>
										</view>
									</view>
								</scroll-view>
							</view>

						</view>
					</view>
				</touchbox>
				<touchbox v-show="indexs===1" :maxTop="maxTops_1" :initTop="initTops_1">
					<view style="display: flex;justify-content: center; padding: 20rpx;flex-wrap: wrap;">
						<view
							style="height: 270rpx;width: 100%;border-radius: 10rpx;padding: 20rpx;border: 1px solid #E6E6E8;">
							<view style="justify-content: space-around;display: flex;">
								<view
									style="margin-left: -170rpx; color: #4BA367;font-size: 40rpx; font-style: normal; font-weight: 500;">
									找农机-帮干活
								</view>
								<view style="margin-right: -150rpx;font-weight: 600;font-size: 31rpx;" @click="cancel">
									取消</view>
							</view>
							<view style="display: flex;flex-wrap: wrap;">

								<view style="width: 100%;">
									<u-form-item label="作业类型" prop="userInfo.sex" ref="item1" labelWidth="100px">
										<view style="display: flex;">
											<view style="margin-left: 30rpx;" @click="pickerOnshow('show')">
												<u--input readonly="true" placeholder="请输入内容" border="bottom"
													v-model="ParamData.tyep"></u--input>
											</view>
											<view class="current-page-wrapper">
												<u-picker :show="show" ref="uPicker1" :columns="columns"
													@cancel="cancels('show')" @confirm="confirm"
													@change="changeHandler"></u-picker>
											</view>
											<view @click="pickerOnshow('show')">
												<u--input readonly="true" placeholder="请输入内容" border="bottom"
													v-model="ParamData.cartype"></u--input>
											</view>
										</view>
									</u-form-item>
								</view>


								<view style="width: 100%;">
									<u-form-item label="价格区间/亩" prop="userInfo.sex" @click="showSex = true;" ref="item1"
										labelWidth="100px">
										<view style="display: flex;">
											<view style="margin-left: 30rpx;width: 45%;"
												@click="pickerOnshow('show_1')">
												<u--input readonly="true" placeholder="0元" border="bottom"
													v-model="ParamData.startPrice"></u--input>
											</view>
											<view>
												<u-picker :show="show_1" ref="uPicker2" :columns="columns_price"
													@cancel="cancels('show_1')" @confirm="price"
													@change="changeHandler"></u-picker>
											</view>
											<view style="width: 10%;padding-top: 15rpx;padding-left: 5rpx;">
												<image src="../../static/img/hyphen.png"
													style="height: 50rpx;width: 50rpx;"></image>
											</view>
											<view style="width: 50%;">
												<u--input readonly="true" placeholder="10元"
													placeholderClass="custom-placeholder_1" border="bottom"
													v-model="ParamData.endPrice"></u--input>
											</view>

										</view>
									</u-form-item>
								</view>

								<!-- <u-action-sheet style="z-index: 9999;" :show="showSex" :actions="actions" title="请选择性别" description="如果选择保密会报错"
									@close="showSex = false" @select="sexSelect">
								</u-action-sheet> -->
							</view>
						</view>

						<view
							style="margin-top:30rpx; height: 300rpx;width: 100%;border-radius: 10rpx;padding: 20rpx;border: 1px solid #E6E6E8;">
							<view style="display: flex;flex-wrap: wrap;">


								<view style="width: 100%;">
									<u-form-item label="搜索范围" prop="userInfo.sex" @click="showSex = true;" ref="item1"
										labelWidth="100px">
										<view style="display: flex;">
											<view style="margin-left: 30rpx;width: 70%;">
												<u--input placeholder="请输入内容" border="bottom"
													v-model="ParamData.searchKm"></u--input>
											</view>
											<view style="width: 30%;">
												<u--input readonly="true" placeholder="KM"
													placeholderClass="custom-placeholder" border="bottom"></u--input>
											</view>
										</view>
									</u-form-item>
								</view>

								<view class="container">
									<u-form-item label="作业位置" prop="userInfo.sex" labelWidth="100px">
									</u-form-item>
									<view class="button-container">
										<view @click="toggleButton('currentLocation')"
											:class="{'active': clickedButton === 'currentLocation'}" class="button">
											<image src="../../static/img/map-pin.png" class="icon"></image>
											<view>当前位置</view>
										</view>
										<view @click="toggleButton('selectLocation')"
											:class="{'active': clickedButton === 'selectLocation'}" class="button">
											<image v-show="localname==='选择位置'" src="../../static/img/map-pin.png"
												class="icon"></image>
											<view>{{limitedLocalServerName(localname)}}</view>
										</view>
									</view>
								</view>
							</view>
							<view style="padding-top: 80rpx;" @click="look_for_nj">
								<u-button color="#4BA367" icon="search" iconColor="white" text="开始寻找"></u-button>
							</view>
						</view>
					</view>
				</touchbox>


				<view style="position: absolute;top: 0;height: 430rpx;width: 100%;background-color: white;"
					v-show="topShow_1">
					<view style="display: flex;margin-top: 170rpx;padding: 20rpx;">
						<view>
							<image src="https://jingfeiwrj.oss-cn-shenzhen.aliyuncs.com/jingfei/%E5%86%9C%E6%9C%BA.jpg"
								style="height: 220rpx;width: 250rpx;border-top-left-radius: 3%;border-bottom-left-radius: 3%;">
							</image>
						</view>

						<view
							style="display: flex; background-color: white; flex-wrap: nowrap; flex-direction: row; padding: 20rpx; height: 190rpx; width: 450rpx; border-top-right-radius: 3%; border-bottom-right-radius: 3%;">
							<view>
								<view style="font-weight: 700; font-size: 30rpx;">
									{{ limitedServerName("旋耕作业") }}
								</view>

								<view style="padding-top: 10rpx;">
									<u-rate size="15" :count="count" activeColor="#FFA700" v-model="value"></u-rate>
								</view>
								<view style="display: flex; flex-direction: row; padding-top: 22rpx;">
									<view style="font-size: 22rpx;">旋耕机</view>
									<view style="padding-left: 5rpx; margin-top: -5rpx;">
										<image src="../../static/icon/Frame-2.png" style="height: 25rpx;width: 25rpx;">
										</image>
									</view>
									<view style="padding-left: 10rpx; font-size: 22rpx;">
										中型
									</view>
								</view>
								<view style="display: flex;padding-top: 15rpx;">
									<image src="../../static/img/speed_phone.png" style="height: 60rpx;width: 260rpx;">
									</image>
									<image src="../../static/img/next.png"
										style="height: 60rpx;width: 160rpx;padding-left: 15rpx;"></image>
								</view>
							</view>
							<view
								style="display: flex; flex-direction: column; padding-left: 70rpx; line-height: 65rpx;">
								<view style="display: flex; margin-top: -15rpx;">
									<view style="position: absolute; right: 235rpx; padding-top: -11rpx;">
										<image src="../../static/goodservers.png" style="height: 25rpx;width: 80rpx;">
										</image>
									</view>

								</view>
								<view style="padding-top: 92rpx;">
									<view style="display: flex;">
										<view
											style="font-weight: 700; position: absolute; right: 145rpx; font-size: 22rpx;">
											距离</view>
										<view
											style="font-weight: 700; position: absolute; right: 50rpx; font-size: 22rpx;">
											230km</view>
									</view>
								</view>

							</view>
						</view>
					</view>
				</view>

				<touchbox v-show="indexs===2" :minTop="0.15" :maxTop="maxTops_2" :initTop="initTops_2">
					<view style="display: flex; padding: 10rpx;flex-wrap: wrap;width: 100%;padding-left: 10rpx;">
						<view style="width: 40%;">
							<text style="color: #91939A;">搜索范围</text>
							<text style="padding: 15rpx;">20km</text>
						</view>
						<view style="width: 50%;">
							<text style="color: #91939A;">价格区间</text>
							<text style="padding: 15rpx;">0 ~ 20元/亩</text>
						</view>
						<view style="font-weight: 600;font-size: 31rpx;" @click="cancelSearch">返回</view>
						<view style="width: 100%;display: flex;padding-top: 30rpx;padding-right:20rpx;">
							<view
								style="background: rgba(75, 163, 103, 0.20);font-size: 32rpx;width: 60%;padding: 25rpx;height: 35rpx;border: 1px solid #4BA367;border-radius: 10rpx;"
								v-if="!topShow">
								<view class="container">
									<text class="gradient-text">正在搜索农机</text>
									<view style="padding-left: 60rpx;margin-top: -10rpx;">
										<demo />
									</view>
								</view>
							</view>
							<view v-else
								style="background: #4BA367;font-size: 32rpx;width: 60%;padding: 25rpx;height: 35rpx;border: 1px solid #4BA367;border-radius: 10rpx;">

								<view class="container" @click="expand">
									<text style="font-size: 30rpx;color: white;">已经找到 29台农机<text
											style="margin-left: 20rpx;margin-top: -3rpx; font-size: 25rpx;color: white;">展开</text></text>
									<image src="../../static/stack.png" style="height: 35rpx;width: 35rpx;"></image>
								</view>
							</view>
							<view
								style="background: #F9AE3D;border-radius: 10rpx;margin-left: 30rpx; width: 40%;padding: 25rpx;height: 35rpx;border: 1px solid #F9AE3D;">
								<u-icon name="search" color="white" size="24"></u-icon>
								<view style="margin-top: -50rpx;color: white;margin-left: 90rpx;font-size: 35rpx;"
									@click="cancelSearch" v-if="!topShow">取消寻找
								</view>
								<view style="margin-top: -50rpx;color: white;margin-left: 90rpx;font-size: 35rpx;"
									@click="ResahSearch" v-else>重新寻找
								</view>
							</view>
						</view>

						<scroll-view style="height: 72vh;" scroll-y="true" enable-back-to-top="true">
							<view style="display: flex; flex-direction: column; margin-top: 10rpx; padding: 20rpx;"
								v-for="i in 10">
								<view
									style="display: flex; background-color: white; padding: 20rpx; border-radius: 3%; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);">
									<view style="flex: 0 0 auto; margin-right: 20rpx;">
										<image
											src="https://jingfeiwrj.oss-cn-shenzhen.aliyuncs.com/jingfei/%E5%86%9C%E6%9C%BA.jpg"
											style="height: 220rpx; width: 280rpx; border-top-left-radius: 3%; border-bottom-left-radius: 3%;">
										</image>
									</view>

									<view
										style="display: flex; flex-direction: column; justify-content: center; width: 450rpx;">
										<view style="font-weight: 700; font-size: 30rpx;">
											{{ limitedServerName("旋耕作业") }}
										</view>
										<view style="position: absolute; right: 160rpx;margin-top: -135rpx;">
											<image src="../../static/goodservers.png" style="height: 36rpx;width: 120rpx;">
											</image>
										</view>
										<view style="padding-top: 30rpx;">
											<u-rate size="15" :count="count" activeColor="#FFA700" v-model="value"
												:disabled="true"></u-rate>
										</view>
										<view style="display: flex; flex-direction: row; padding-top: 30rpx;">
											<view style="font-size: 22rpx;">旋耕机</view>
											
											<view style="padding-left: 10rpx; font-size: 22rpx;">中型</view>
										</view>
										<view
											style="display: flex; flex-wrap: nowrap; flex-direction: row; width: 100%;">
											<view style="display: flex; width: 30%;">
												<view style="font-weight: 700; flex-shrink: 0; font-size: 22rpx;">距离
												</view>
												<view
													style="font-weight: 700; flex-shrink: 0; font-size: 22rpx; margin-left: 10rpx;">
													230km</view>
											</view>
											<view
												style="display: flex; margin-top: -30rpx; width: 70%; padding-left: 80rpx;" @click="Contact_Now">
												<image src="../../static/img/speed_phone.png"
													style="height: 55rpx; width: 200rpx;"></image>
											</view>
										</view>
									</view>
								</view>
							</view>
						</scroll-view>
					</view>
				</touchbox>
			</view>
		</view>

		<ModelComponents />
		<helang-tab-bar-bulge :fixed-bottom="true" :currents="10" v-show="tabshow"></helang-tab-bar-bulge>
	</view>
	</view>
</template>

<script>
	import tabBarBulge from "@/uni_modules/helang-tabBar/components/helang-tabBar/tab-bar-bulge";
	import TopNavVue from "../../components/TopNav/TopNav.vue";
	import ModelComponents from "../../components/Model/Model.vue";
	import Map from "../../components/Map/Map.vue";
	import touchbox from "../../uni_modules/you-touchbox/components/you-touchbox/you-touchbox.vue";
	import animation from "../../components/Rotating_animation/Rotating_animation.vue";
	import demo from "../demo/demo.vue"
	export default {
		components: {
			"helang-tab-bar-bulge": tabBarBulge,
			TopNavVue,
			ModelComponents,
			Map,
			touchbox,
			animation,
			demo

		},
		data() {
			return {
				ParamData: {
					tyep: "",
					cartype: "",
					startPrice: "",
					endPrice: "",
					searchKm: "",
					workLocal: ""
				},
				value: 4,
				count: 5,
				initTops: 0.35,
				maxTops: 0.90,
				initTops_1: 0.55,
				maxTops_1: 0.60,
				initTops_2: 0.15,
				maxTops_2: 0.15,
				indexs: 0,
				columns: [
					['中国', '美国'],
					['深圳', '厦门', '上海', '拉萨']
				],
				columnData: [
					['深圳', '厦门', '上海', '拉萨'],
					['得州', '华盛顿', '纽约', '阿拉斯加']
				],
				columns_price: this.generateColumnsPrice(),
				show: false,
				show_1: false,
				tabshow: true,
				clickedButton: null,
				localname: "选择位置",
				startSearch: false,
				isMapDraggable: false,
				topShow: false,
				topShow_1: false,

			}
		},
		computed: {
			// 计算属性用于限制服务名称长度，这里假设限制为10个字，可按需更改
			limitedServerName() {
				return function(serverName) {
					if (serverName.length > 5) {
						return serverName.substring(0, 5) + '...';
					}
					return serverName;
				};
			},
			limitedLocalServerName() {
				return function(serverName) {
					if (serverName.length > 8) {
						return serverName.substring(0, 8) + '...';
					}
					return serverName;
				};
			},
			// 计算属性用于限制地址长度，假设限制为15个字，可按需调整
			limitedAddress() {
				return function(address) {
					if (address.length > 2) {
						return address.substring(0, 2) + '...';
					}
					return address;
				};
			}
		},

		methods: {
			generateColumnsPrice() {
				const firstColumn = Array.from({
					length: 101
				}, (_, i) => i); // 生成 0 到 100  
				const secondColumn = Array.from({
					length: 900 - 101 + 1
				}, (_, i) => i + 101); // 生成 101 到 900  
				return [
					firstColumn, // 第一列  
					secondColumn // 第二列  
				];
			},
			click(name) {
				this.$refs.uToast.success(`点击了第${name}个`)
			},
			mapcontrol() {
				this.$refs.sonRef.controltap();
			},
			input() {
				console.log(1)
				this.indexs = 1
				this.tabshow = false

			},
			sexSelect(e) {
				this.model1.userInfo.sex = e.name
				this.$refs.uForm.validateField('userInfo.sex')
			},
			cancel() {
				this.indexs = 0
				this.tabshow = true
				this.topShow_1 = false
				this.ParamData = {
					tyep: "",
					cartype: "",
					startPrice: "",
					endPrice: "",
					searchKm: "",
					workLocal: ""
				};
			},
			pickerOnshow(e) {
				if (e === 'show') {
					this.show = true
				} else if (e === 'show_1') {
					this.show_1 = true
				}

			},
			cancels(e) {
				if (e === 'show') {
					this.show = false
				} else if (e === 'show_1') {
					this.show_1 = false
				}


			},
			confirm(e) {
				console.log(e.value[0] + e.value[1])
				this.ParamData.tyep = e.value[0]
				this.ParamData.cartype = e.value[1]
				this.show = false
			},
			price(e) {
				const startPrice = e.value[0];
				const endPrice = e.value[1];
				console.log(startPrice + "元", endPrice + "元"); // 在控制台中添加“元”  

				this.ParamData.startPrice = startPrice;
				this.ParamData.endPrice = endPrice;

				// 这里可以选择是否需要在界面中展示选中的价格  
				this.show_1 = false;

				// 如果需要在某个显示区域展示选择的价格，可以这样设置：  
				this.selectedPriceDisplay = `选择的价格范围：${startPrice}元 - ${endPrice}元`;
			},
			changeHandler(e) {
				const {
					columnIndex,
					value,
					values,
					index,
					picker = this.$refs.uPicker
				} = e

				if (picker === this.$refs.uPicker1 && columnIndex === 0) {
					picker.setColumnValues(1, this.columnData[index])
				}

				if (picker === this.$refs.uPicker2 && columnIndex === 0) {
					picker.setColumnValues(1, this.columns_price[index])
				}
			},
			localApi() {
				let this_ = this
				uni.chooseLocation({
					success: async function(res) {
						this_.localname = res.name
						console.log(res, "返回地址")
					},
					fail: function(e) {
						console.log(e, "报错")
					}
				})
			},
			toggleButton(button) {
				// 切换按钮状态  
				if (this.clickedButton === button) {
					if (button === "currentLocation") {
						this.clickedButton = button;
						console.log(button, 1)
					} else {
						this.localApi()
					}

				} else {
					console.log(button, 2)
					this.clickedButton = button;
					if (button === "selectLocation") {
						this.localApi()
					}
					this.localname = "选择位置"
				}
			},
			look_for_nj() {


				this.indexs = 2;
				this.startSearch = true;
				this.MapDraggable = true;
				this.topShow = false;
				let this_ = this;
				setTimeout(() => {
					this_.topShow = true;
					this_.topShow_1 = true;
					this.startSearch = false;
				}, 1000);
			},
			cancelSearch() {
				this.indexs = 1;
				this.topShow = true;
				this.topShow_1 = false
				this.ParamData = {
					tyep: "",
					cartype: "",
					startPrice: "",
					endPrice: "",
					searchKm: "",
					workLocal: ""
				};
			},
			expand() {
				console.log(1)
				this.topShow = true
				this.topShow_1 = false
				this.initTops_2 = 0.85
				this.maxTops_2 = 0.85
				console.log(this.initTops_2, this.maxTops_2)
			},
			ResahSearch() {
				if (this.topShow) {
					this.topShow = false;
					this.topShow_1 = false;
					this.look_for_nj();
				}
			},
			Contact_Now(){
				uni.navigateTo({
					url:"/pages/Contact_Now/Contact_Now"
				})
			}

		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #f7f7f7;
		// 总容器高度撑满屏幕
		height: 100%;
		// 使容器内元素使用flex布局
		display: flex;
		flex-direction: column;
	}

	.container {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
	}

	.button-container {
		width: 100%;
		display: flex;
	}

	.button {
		border: 1px solid #E6E6E8;
		display: flex;
		flex-wrap: nowrap;
		justify-content: center;
		padding: 20rpx;
		height: 50rpx;
		width: 40%;
		/* 可根据需要调整 */
		background-color: white;
		/* 默认背景色 */
		border-radius: 10rpx;
		margin-left: 10rpx;
		/* 调整按钮间距 */
		transition: background-color 0.3s ease;
		/* 平滑过渡效果 */
	}

	.button.active {
		background-color: green;
		/* 激活状态背景色 */
		color: white;
		/* 激活状态字体颜色 */
	}

	.icon {
		height: 40rpx;
		width: 40rpx;
	}

	.bg {
		position: absolute;
		/* 绝对定位 */
		top: 0;
		left: 0;
		width: 100%;
		/* 宽度占满 */
		height: 21%;
		/* 高度占满 */
		z-index: 1;
		/* 设置较低的层级 */
	}

	.overlay {

		opacity: 0.9;

	}

	.grid-text {
		font-size: 14px;
		color: black;
		font-weight: 700;
		padding: 10rpx 0 20rpx 0rpx;
		/* #ifndef APP-PLUS */
		box-sizing: border-box;
		/* #endif */
	}

	.grid-text {
		font-size: 14px;
		color: #909399;
		padding: 10rpx 0 20rpx 0rpx;
		/* #ifndef APP-PLUS */
		box-sizing: border-box;
		/* #endif */
	}

	.item_clom {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 100%;
	}

	.item_text {
		/* This is for other text elements, you might not need these styles */
		display: inline-block;
		/* Makes sure text aligns properly */
		text-align: center;
		/* Centers the text */
	}

	.gradient-text {
		background: linear-gradient(90deg, #000 0%, #4BA367 100%);
		background-clip: text;
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;

	}

	::v-deep .helang-tab-bar .bar.fixed.data-v-7a0948d1 {
		position: fixed;
		bottom: 0;
		left: 0;
		height: 119rpx;
		width: 750rpx;
	}

	::v-deep .u-border {
		border-width: 0.5px !important;
		border-color: #dadbde !important;
		border-style: solid;
		background-color: #f5f5f5;
	}

	::v-deep .u-button.data-v-3bf2dba7 {
		height: 40px;
		position: relative;
		align-items: center;
		justify-content: center;
		display: flex;
		flex-direction: row;
		box-sizing: border-box;
		flex-direction: row;
	}

	.picker-container {
		z-index: 100;
	}

	// .current-page-wrapper ::v-deep .u-popup__content.data-v-52d4ddd1 {
	// 	background-color: #fff;
	// 	position: relative;
	// 	padding-bottom: 240rpx;
	// }



	::v-deep .u-button--normal.data-v-3bf2dba7 {
		padding: 42rpx 12px;
		font-size: 14px;
	}

	::v-deep .u-form-item__body__left__content__label.data-v-5e7216f1 {
		display: flex;
		flex-direction: row;
		align-items: center;
		flex: 1;
		color: #303133;
		font-size: 16px;
	}

	/deep/.custom-placeholder {
		color: #555555;

		font-size: 30rpx;
		padding-left: 37rpx;


	}

	/deep/ .font_size {
		color: #d9d9d9;
		font-size: 28rpx;

	}

	/deep/ .custom-placeholder_1 {
		color: #d9d9d9;
		font-size: 28rpx;
		padding-left: 90rpx;

	}
</style>